import React, { Component } from 'react'
// 导入路由
import { withRouter } from "react-router-dom"
// 首页搜索框组件
import SearchInput from "../SearchInput/SearchInput"
//导入请求数据接口
import { getHomeSwiperList, getHomeCatItems, getHomePicList } from '../../api'
// 首页css
import styles from "./Home.module.scss";
/*  引入轮播图组件 */
import { Carousel } from "antd-mobile";
class Home extends Component {
    state = {
        //首页轮播图的数据
        swiperList:[],
        //首页导航栏数据
        catItems:[],
        //图片列表
        picList:[]
    }
      // 跳转到商品详情页面
    goToGoodDetail = (goods_id) => {
        this.props.history.push("goodDetail/" + goods_id);
    }
    // 跳转到分类页面
    goToCategory=(params) => {
        this.props.history.push("category")
    }
    // 跳转到产品列表
    goToProductList = (params) => {
        this.props.history.push("goodList?query=" + "服装");
    }
    //在组件挂载之前发起同步axios请求数据接口
    async componentDidMount(){
        // 首页轮播图的数据
        let swiperList = await getHomeSwiperList();
        //首页导航栏数据
        let catItems = await getHomeCatItems();
        let picList = await getHomePicList();
    //改变状态
        this.setState((preState)=>{
            return{
                //改变首页轮播图的数据
                swiperList:swiperList.message, 
                catItems:catItems.message,
                picList:picList.message
            }
        })
    }

    render() {
        return (<div className={styles.ShoppingHomeCat}>
            {/* 首页标题的开始 */}
            <div className={styles.ShoppingTitle}>
                <span className={styles.title}>京东商城</span>
            </div>
            {/* 首页标题的结束 */}
            {/* 首页搜索框的开始 */}
            <SearchInput></SearchInput>
            {/* 首页搜索框的结束  */}
            {/* 首页轮播组件开始 */}
            {/* 
             autoplay 自动播放
             infinite 无限播放
            */}
            <Carousel autoplay={true} infinite>
                {
                 this.state.swiperList.map((val) => (
                     <img
                         key={val.image_src}
                         onClick={this.goToGoodDetail.bind(this, val.goods_id)}
                         src={val.image_src}
                         style={{ width: "100%", verticalAlign: "top" }}
                         onLoad={() => {
                             window.dispatchEvent(new Event("resize"));
                             this.setState({ imgHeight: "auto" });}}/>
                 ) 
                 )
                }
            </Carousel>
            {/* 首页轮播组件结束 */}
            {/* 首页导航栏开始 */}
            <div className={styles.jdHomeCat}>
                {this.state.catItems.map((v,i)=>{
                    return <div 
                        onClick={this.goToCategory}
                    className={styles.homeCatItem} key={v.image_src}>
                            <img src={v.image_src} alt="" />
                        </div>
                    })
                }
             </div>
            {/* 首页导航栏结束*/}
            {/* 首页的图片列表开始 */}
        <div className={styles.ykHomeList}>
            {
              this.state.picList.map((v,i)=>{
                return <div className={styles.homeListItem} key={v.floor_title.image_src}>
                  {/* 标题的开始 */}
                  <div className={styles.listItemTitle}>
                    <img src={v.floor_title.image_src} alt=""/>
                  </div>
                  {/* 标题的结束 */}
                  {/* 图片列表的开始 */}
                  <div className={styles.listItemPics}>
                    {
                      v.product_list.map((vv,i)=>{
                        return <div className={styles.picItem} key={vv.image_src} onClick={this.goToProductList}>
                          <img src={vv.image_src} alt=""/>
                        </div>
                      })
                    }
                  </div>
                  {/* 图片列表的结束 */}
                </div>
              })
            }
        </div>
        {/* 首页的图片列表结束 */}
        </div>)
    }
}
//将组件注入到路由
export default withRouter(Home);